<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }

        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>
    <!--
1. 点击 btn-sel-all 按钮，把左边里面所有城市添加到 右边去。
2. 点击 btn-sel-none 按钮，把右边所有的城市，添加左边。

3. 点击  btn-se 按钮，把左边选中的城市，添加到右边去。
4. 点击  btn-back 按钮，把右边选中的城市，添加到左边。
-->

</head>

<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">西红柿</option>
</select>
<div class="btn-box">
    <button id="btn-sel-all"> &gt;&gt;</button>
    <button id="btn-sel-none"> &lt;&lt;</button>
    <button id="btn-sel"> &gt;</button>
    <button id="btn-back"> &lt;</button>
</div>
<select id="tar-city" name="tar-city" multiple>

</select>
</body>

</html>

<script>
    var srcLeft = document.getElementById('src-city');
    var tarRight = document.getElementById('tar-city');
    var btnSel = document.getElementById('btn-sel');
    var btnSelAll = document.getElementById('btn-sel-all');
    var btnselnone = document.getElementById('btn-sel-none');
    var btnback = document.getElementById('btn-back');
    //全选
    btnSelAll.onclick = function(){
        for(var i = 0; i < srcLeft.options.length; i++){
            if(srcLeft.options[i].selected){
                tarRight.options.add(srcLeft.options[i]);
                i--
            }
        }

    };
    btnselnone.onclick = function(){
        for(var i = 0; i < tarRight.options.length; i++){
            if(tarRight.options[i].selected){
                srcLeft.options.add(tarRight.options[i]);
                i--
            }
        }

    };
    //单选
    btnSel.onclick=function(){
        for(var i=0;i < srcLeft.options.length; i++){
            if(srcLeft.options[i].selected){
                tarRight.options.add(srcLeft.options[i]);
                break;
            }
        }
    };
    btnback.onclick=function(){
        for(var i=0;i <  tarRight.options.length; i++){
            if( tarRight.options[i].selected){
                srcLeft.options.add( tarRight.options[i]);
                break;
            }
        }
    };
</script>